<template>
  <el-tooltip placement="left">
    <template #content>
      <div class="toolbar_right_camera_tooltip">
        <div
          v-for="icon in iconList"
          :key="icon.name"
          class="item"
          :class="active === icon.name ? 'active' : undefined"
          @click="onChange(icon)"
        >
          <SvgIcon :icon-class="icon.name" />
          <span>{{ icon.tip }}</span>
        </div>
      </div>
    </template>
    <div class="toolbar-right-camera">
      <SvgIcon :icon-class="active" />
    </div>
  </el-tooltip>

  <el-dialog v-model="isShow" :width="420" custom-class="toolbar_right_camera_dialog">
    <template #header>
      <div>
        <span>当前视角</span>
        <SvgIcon icon-class="ic_复制" @click="copyParams" />
      </div>
    </template>
    <span>{{ cameraParams }}</span>
  </el-dialog>
</template>

<script lang="ts" setup>
import { copy } from '@jl/common/utils';

const active = ref('ic_地球');
const isShow = ref(false);
const cameraParams = ref('');
const iconList = [
  { name: 'ic_地球', tip: '定位默认视角' },
  { name: 'ic_当前视角', tip: '获取当前视角' },
];
const { cimInstance } = window;

const onChange = (icon: any) => {
  active.value = icon.name;
  if (icon.name === 'ic_地球') {
    cimInstance.api.flyToHome();
  }
  if (icon.name === 'ic_当前视角') {
    const data = cimInstance.api.getCameraParameter();
    isShow.value = true;
    cameraParams.value = JSON.stringify(data);
  }
};

const copyParams = () => {
  copy(cameraParams.value);
};
</script>

<style lang="less">
.toolbar_right_camera_dialog {
  background: #2e2e2e;
  color: #fff;

  .el-dialog__header {
    padding: 16px 16px 12px 16px;
    margin: 0;
    font-size: 16px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.88);
    > div {
      display: flex;
      align-items: flex-end;
      gap: 4px;

      .svg-icon {
        font-size: 20px;
        cursor: pointer;
        transform: rotate(180deg);
      }
    }
    button {
      top: 0;
      .el-dialog__close {
        color: #fff;
      }
    }
  }

  .el-dialog__body {
    height: auto;
    color: #fff;
    font-size: 14px;
    font-weight: 400;
    padding-top: 0;
  }
}
</style>
<style lang="less" scoped>
.toolbar-right-camera {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 36px;
  height: 36px;
  background: #2a2e33;
  border-radius: 4px;
  margin-bottom: 10px;
  cursor: pointer;

  .svg-icon {
    font-size: 24px;
  }
}

.toolbar_right_camera_tooltip {
  padding: 12px 0px;

  .item {
    width: 160px;
    padding: 0 8px;
    display: flex;
    align-items: center;
    cursor: pointer;
    border: 1px solid transparent;
    border-radius: 4px;

    .svg-icon {
      font-size: 24px;
      margin-right: 8px;
    }

    &:hover,
    &.active {
      background: rgba(5, 96, 253, 0.3);
      border: 1px solid var(--el-color-primary);
    }
  }

  .item + .item {
    margin-top: 10px;
  }
}
</style>
